/*
验证规则：
1.用户名以字母开头，不少于3位，只能包含数字、字母、_
1.1 英文字母 [A-Za-z]
1.2 包含数字、字母、_ \w
1.3 匹配开头^
1.4 次数 {3,}
2.邮箱。
^[A-Za-z0-9]\w+@\w{2,}\.[a-zA-Z]{2,4}
3.密码，6位以上的字符
\w{6,20}
*/

const submit = document.getElementById('submit')
const usernameIpt = document.getElementById('username')
const emailIpt = document.getElementById('email')
const pwd1Ipt = document.getElementById('pwd1')
const pwd2Ipt = document.getElementById('pwd2')
//表单所有字段验证结果对象
let valiRes = {
    username: false,
    email: false,
    pwd1:false,
    pwd2:false
}
function valiUsername() {
    //获取用户名输入框的值
    const username = usernameIpt.value
    //生成用户名验证的正则对象
    const usernameReg = /^[A-Za-z]\w{2,}/
    //设置valiRes
    valiRes.username = usernameReg.test(username)
    let msg = valiRes.username ? '用户名格式对了' : '用户名格式不正确'
    //弹出提示 
    hanldeUsernameTip(valiRes.username,msg)

    
}

function hanldeUsernameTip(ispass,msg){
    const helpEle = document.querySelector('#username+.help')
    const formGroupEle = usernameIpt.parentElement
    if(msg){helpEle.innerText = msg}
    if(ispass){
        //如果验证正确
        formGroupEle.classList.add('success')
        formGroupEle.classList.remove('error')
    }else{
        formGroupEle.classList.remove('success')
        formGroupEle.classList.add('error')
    }
}

function valiEmail() {
    const email = emailIpt.value
    const emailReg = /^[A-Za-z0-9]\w+@\w{2,}\.[a-zA-Z]{2,4}/
    valiRes.email  = emailReg.test(email)
    //弹出提示
}

function valiPwd1(){
    const pwd1 = pwd1Ipt.value
    const pwd1Reg = /\w{6,20}/
    valiRes.pwd1 = pwd1Reg.test(pwd1)
    //弹出提示
    const msg = valiRes.pwd1 ? '密码正确' : '密码格式错了'
    hanldePwd1Tip(valiRes.pwd1,msg)
}

function hanldePwd1Tip(ispass,msg){
    const helpEle = pwd1Ipt.nextElementSibling
    const formGroupEle = pwd1Ipt.parentElement
    if(msg){helpEle.innerText = msg}
    if(ispass){
        //如果验证正确
        formGroupEle.classList.add('success')
        formGroupEle.classList.remove('error')
    }else{
        formGroupEle.classList.remove('success')
        formGroupEle.classList.add('error')
    }
}

submit.onclick = function (e) {
    //验证结果状态
    let isPass = valiForm(valiRes)
    if (!isPass) {
        console.log('表单验证失败')
        //如果用户名验证失败
        e.preventDefault();//阻止提交按钮的默认行为，也就是阻止表单提交
    }
}

//验证valiRes里面的每项是否通过
function valiForm(valiRes) {
    for (key in valiRes) {
        if (!valiRes[key]) {
            return false
        }
    }
    return true
}


//当用户名输入框改变输入，调用验证用户名的函数
usernameIpt.onchange = valiUsername
emailIpt.onchange = valiEmail
pwd1Ipt.onchange = valiPwd1

/*
字段验证流程：输入框改变 -> 触发onchange事件 -> 调用valiUsername验证输入框值 -> 调用hanldeUsernameTip处理提示信息
提交流程：点击提交按钮 -> 触犯提交按钮的click事件 -> 调用匿名函数 -> 调用valiForm函数，验证全局变量valiRes是否全部为true -> 是否调用e.preventDefault()阻止表单提交
*/